<template>
	<view v-if="shenheStatus == 0" class="" :style="[boxStyle]">
		<view class="coupon_box">
			<view style="padding-top: 30rpx" v-if="list.length == 0">
				<u-empty :text="$t('common.noCoupon')" mode="coupon"></u-empty>
			</view>
			<!-- <view class="coupon_item" v-for="(item, index) in list" :key="index">
        <view
          class="item_top"
          :style="{
            backgroundImage:
              item.is_receive == 1
                ? `url(${asyncImgs.coupon.icon_coupon_disabled})`
                : `url(${asyncImgs.coupon.icon_coupon_enabled})`,
          }"
        >
          <view class="couponInfo">
            <view style="line-height: 100rpx; display: inline-block">
              ￥
              <text style="font-size: 60rpx; font-weight: bold">{{
                item.sub_price
              }}</text>
            </view>
            <view style="display: inline-block; margin-left: 20rpx">
              <view>{{ item.name }}</view>
              <view>{{$t('coupon.price1')}}{{ item.min_price }}{{$t('coupon.price2')}}</view>
            </view>
          </view>
          <view
            class="item_btn"
            :style="{ color: item.is_receive == 1 ? '#666' : '' }"
            @click="onReceive(item, item.is_receive)"
            >{{ item.is_receive == 1 ? $t('coupon.getted') : $t('coupon.toGet') }}</view
          >
        </view>
        <view class="item_bottom">
          <view class="">{{$t('coupon.validDate')}}{{$t('coupon.date1')}}{{item.expire_day}}{{$t('coupon.date2')}}</view>
          <view class="">{{ item.content }}</view>
        </view>
      </view> -->

			<view class="coupon-item" v-for="(item, index) in list" :key="index">
				<view class="date-price flex-x-sb flex-y-center">
					<view>
						<view class="title">{{ item.name }}</view>
						<view class="date" v-if="item.expire_type == 1">{{$t('facePay.getted')}}{{
                item.expire_day == 0 ? $t('member.permanent') : item.expire_day + $t('coupon.date2')
              }}</view>
						<view class="date" v-else>{{ item.begintime }}-{{ item.endtime }}</view>
					</view>
					<view class="price-box flex-col flex-y-center">
						<!-- 满减卷 -->
						<template v-if="item.discount_type == 2">
							<view>￥<text style="font-size: 56rpx">{{
                  item.sub_price
                }}</text></view>
							<view> {{$t('coupon.price1')}}{{ item.min_price }}{{$t('coupon.price2')}} </view>
						</template>
						<!-- 打折卷 -->
						<template v-else-if="item.discount_type == 1">
							<view><text style="font-size: 56rpx">{{ item.discount }}</text>{{$t('clerk.member2')}}
							</view>
						</template>

					</view>
				</view>

				<view class="note flex-x-sb">
					<view class="left">
						<u-collapse class="collapse" ref="collapse">
							<u-collapse-item :title="$t('facePay.detail')">
								{{ item.rule }}
							</u-collapse-item>
						</u-collapse>
					</view>
					<view class="btn-groups">
						<view class="use-btn" v-if="item.is_receive == 0" @click="onReceive(item, item.is_receive)">
							{{$t('coupon.toGet')}}
						</view>
						<view class="go-with" v-else>{{$t('coupon.getted')}}</view>
						<!-- @click="$utils.toUrl('/pages/home/home', 'switchtab')" -->
						<button @click="shareClick(item)" open-type="share" class="u-reset-button use-btn u-m-l-10 u-p-l-20 u-p-r-20"
							style="background-color:  cornflowerblue; width: initial;">分享</button>
					</view>
				</view>

				<view class="status">
					<view v-if="item.status == 0">{{$t('coupon.noUse')}}</view>
					<view v-else-if="item.status == 1">{{$t('coupon.used')}}</view>
					<view v-else-if="item.status == 2">{{$t('coupon.expire')}}</view>
				</view>
			</view>
		</view>
		<div class="footNav fixed" v-if="useFoot">
			<footNav :controlList="controls"></footNav>
		</div>
		<getSuccess v-if="showGetCoupon" @close="$store.state.showGetCoupon = false" :couponInfo="gettedCoupon">
		</getSuccess>
	</view>
	<Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
	import Shenhe from '@/components/shenhe/shenhe'
	export default {
		components: {
			Shenhe
		},
		data() {
			return {
				list: [],
				currentItem: {},
				useFoot: false,
				coupon_id: '',
			};
		},
		onLoad(params) {
			uni.setNavigationBarTitle({
				title: this.$t("title.couponCenter"),
			});
			this.coupon_id = params.coupon_id ? params.coupon_id : 0
		},
		onShow() {
			this.getListData();
			setTimeout(() => {
				try {
					this.useFoot = this.$utils.useFoot(this.controls);
				} catch (e) {}
			}, 500);
		},
		onReachBottom() {},
		methods: {
			shareClick(item) {
				this.coupon_id = item.id
			},
			async onReceive(item, is_receive) {
				if (is_receive == 1) {
					return;
				}
				this.$store.state.gettedCoupon = item;
				try {
					const res = await this.$allrequest.coupon.receiveConpon({
						id: item.id,
					});
					if (res.code == 0) {
						this.$store.state.showGetCoupon = true
						this.getListData();
					} else {
						this.$utils.toast(res.msg);
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getListData() {
				try {
					const res = await this.$allrequest.coupon.couponList({
						coupon_id: this.coupon_id
					});
					if (res.code == 0) {
						this.list = res.data.list;
					} else {
						this.$utils.toast(res.msg);
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
		},
		computed: {
			boxStyle() {
				return {
					paddBottom: this.useFoot ?
						"calc(env(safe-area-inset-bottom) + 100rpx)" : "0px",
				};
			},
			dateFilter() {
				return function(str) {
					return this.$utils.turnDate(str * 1000 || 0, "yyyy-mm-dd");
				};
			}
		},
		onShareAppMessage() {
			return {
				title: '领劵中心',
				path: `other/coupon_center/coupon_center?coupon_id=${this.coupon_id}`,
			}
		}
	};
</script>

<style lang="scss" scoped>
	$bgcolor: #f2f2f2;

	.coupon_box {
		height: 100vh;
		padding: 20rpx 0;
		background-color: $bgcolor;

		.couponInfo {
			display: flex;
		}

		.coupon-item {
			position: relative;
			margin: 0 24rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.date-price {
				padding: 30rpx;

				>view:nth-child(1) {
					flex: 1;
					width: 0;

					.title {
						font-size: 30rpx;
						font-weight: 600;
					}

					.date {
						margin-top: 12rpx;
						font-size: 22rpx;
						color: #8c8c8c;
					}
				}

				.price-box {
					>view:nth-child(1) {
						font-size: 28rpx;
						font-weight: 600;
						color: #f0250e;
					}

					>view:nth-child(2) {
						font-size: 22rpx;
						color: #8c8c8c;
					}
				}
			}

			.note {
				position: relative;
				padding: 15rpx 30rpx;
				border-top: 1px dashed #ededed;

				&::after {
					content: "";
					position: absolute;
					left: -10rpx;
					top: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background: $bgcolor;
					border-radius: 50%;
				}

				&::before {
					content: "";
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background: $bgcolor;
					border-radius: 50%;
				}

				.left {
					flex: 1;
					width: 0;

					/deep/.u-iconfont {
						color: #8c8c8c !important;
						;
					}

					/deep/.u-collapse-head {
						justify-content: flex-start;
						line-height: 48rpx;
						padding: 0;
						color: #8c8c8c;
					}

					/deep/.u-collapse-title {
						flex: initial;
						font-size: 24rpx;
						color: #8c8c8c;
					}

					/deep/.u-collapse-content {
						font-size: 24rpx;
						color: #8c8c8c;
					}
				}

				// 按钮
				.btn-groups {
					margin-left: 10rpx;
					display: flex;
					justify-content: flex-end;

					view,
					button {
						width: 144rpx;
						height: 48rpx;
						line-height: 48rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						text-align: center;
						border-radius: 24rpx;
					}

					.use-btn {
						background: #f0250e;
						color: #fff;
					}

					.go-with {
						background: #fee8e6;
						color: #f0250e;
					}

					.share-btn {
						background: #ffffff;
						border: 2rpx solid #999999;
						color: #191919;
						position: relative;

						button {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 11;
							opacity: 0;
						}
					}
				}
			}

			.status {
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 10rpx;

				border-radius: 0px 20rpx 0px 12rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #f0250e;
				background: #fee8e6;
			}
		}

		// .coupon_item {
		//   margin-bottom: 20rpx;
		//   .item_top {
		//     display: flex;
		//     justify-content: space-between;
		//     height: 160rpx;
		//     width: 100%;
		//     background-repeat: no-repeat;
		//     background-size: 100% 100%;
		//     padding: 30rpx;
		//     color: #fff;
		//     .item_btn {
		//       margin-top: 20rpx;
		//       background-color: #fff;
		//       border-radius: 50rpx;
		//       height: 60rpx;
		//       line-height: 60rpx;
		//       width: 120rpx;
		//       min-width: 120rpx;
		//       font-size: 24rpx;
		//       text-align: center;
		//       color: rgb(255, 69, 68);
		//     }
		//   }
		//   .item_bottom {
		//     border: 1px solid #eee;
		//     font-size: 24rpx;
		//     background-color: #fff;
		//     padding: 20rpx 20rpx 24rpx;
		//     border-radius: 0 0 10rpx 10rpx;
		//     border: 1px solid #eee;
		//     border-top: none;
		//     color: #666;
		//   }
		// }
	}

	.u-reset-button {
		margin: 0 auto;
		color: #fff;
		width: 144rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-align: center;
		border-radius: 24rpx;
	}
</style>
